<template>
    <div>
        <div class="btns">
            <div class="back" @click="$router.push('../Goods')">返回</div>
            <input class="search" type="text" v-model="searchText" 
            @input="searchGoods" placeholder="🔍输入内容">
        </div>
        <GoodsList :recoList="recoList"></GoodsList>
  
    </div>
</template>

<script>
import axios from 'axios'
import GoodsList from './components/GoodsList.vue';

export default {
    name: 'Goods',
    components: {GoodsList},
    data(){
        return{
          recoList1:[],//总商品列表
          searchText: '', // 搜索框中的内容
          recoList: [] // 匹配到的商品列表数据
        }
    },
    methods:{//获取json文件内容,
      getGoodsData(){
        axios.get('../static/Goods.json').
        then(this.getGoodsDataSucc)
      },
      getGoodsDataSucc(res){//获取成功后,将内容放入全局data内
        res=res.data
        if(res){
          this.recoList1=res
        }
      },
      searchGoods() {//搜索功能
        if(this.searchText!=''){
          this.recoList = this.recoList1.filter
          (item => item.recoDesc.includes(this.searchText) 
          || item.recoPrice.includes(this.searchText)
          || item.recoSeller.includes(this.searchText));
        }else if(this.searchText=''){
          this.recoList = this.recoList1
        }
      }
    },
    mounted(){
      this.getGoodsData()//获取商品列表
      this.searchGoods()
    },
    
}
</script>

<style scoped lang="stylus">
  .btns{
    position relative
    padding 0px
    margin 10px
    align-items: center;
    overflow hidden
  }
  .btns .search{
    position relative 
    float right
    max-width 85%
    border-radius 50px
    margin 0px
  }
  .btns .back{
    position absolute 
    float left
    margin 0px
    padding 10px
    color #6c91f9
  }
</style>